<template>
  <div>
    <div
      class="container"
      :style="{
        minHeight: '100vh',
        alignItems: 'center',
        background:
          'url(http://codegen.caihongy.cn/20231118/03ccfac983fd4dac8fa98ccb357ee0dc.jpg)',
        display: 'flex',
        width: '100%',
        backgroundSize: '100% 100%',
        backgroundPosition: 'center center',
        backgroundRepeat: 'no-repeat',
        justifyContent: 'center',
      }"
    >
      <el-form
        :style="{
          border: '0px solid #f6f6f6',
          padding: '40px 40px 40px 580px',
          boxShadow: '-15px 15px 15px rgb(6 17 47 / 70%)',
          margin: '0 auto',
          alignItems: 'flex-start',
          textAlign: 'center',
          display: 'flex',
          minHeight: '450px',
          borderRadius: '0',
          flexWrap: 'wrap',
          background:
            'url(http://codegen.caihongy.cn/20231118/34d34cfbb0d24d9a93774283d89dcd76.jpg) no-repeat left center / 480px 100%,#fff',
          width: '900px',
          fontSize: '14px',
          height: 'auto',
        }"
      >
        <div
          v-if="true"
          :style="{
            padding: '0px',
            margin: '0 0 20px',
            borderColor: '#ddd',
            color: '#2b9afc',
            textAlign: 'left',
            display: 'inline-block',
            background: 'none',
            borderWidth: '0px',
            lineHeight: '30px',
            fontSize: '18px',
            borderStyle: 'solid',
            fontWeight: '500',
          }"
          class="title-container"
        >
          基于web的传统文化推广平台登录
        </div>
        <div
          v-if="loginType == 1"
          class="list-item"
          :style="{
            width: '100%',
            margin: '0 0 10px',
            position: 'relative',
            alignItems: 'center',
            flexWrap: 'wrap',
            display: 'flex',
          }"
        >
          <div
            v-if="true"
            class="lable"
            :style="{
              color: '#333',
              left: '-100px',
              textAlign: 'right',
              width: '100px',
              lineHeight: '44px',
              fontSize: 'inherit',
              position: 'absolute',
            }"
          >
            用户名：
          </div>
          <input
            :style="{
              border: '1px solid #eee',
              padding: '0 10px',
              boxShadow: '0 0 0px rgba(64, 158, 255, .3)',
              outline: '0px solid #eee',
              color: '#666',
              outlineOffset: '0px',
              borderRadius: '4px',
              background: 'none',
              width: '100%',
              fontSize: 'inherit',
              height: '40px',
            }"
            placeholder="请输入用户名"
            name="username"
            type="text"
            v-model="rulesForm.username"
          />
        </div>
        <div
          v-if="loginType == 1"
          class="list-item"
          :style="{
            width: '100%',
            margin: '0 0 10px',
            position: 'relative',
            alignItems: 'center',
            flexWrap: 'wrap',
            display: 'flex',
          }"
        >
          <div
            v-if="true"
            class="lable"
            :style="{
              color: '#333',
              left: '-100px',
              textAlign: 'right',
              width: '100px',
              lineHeight: '44px',
              fontSize: 'inherit',
              position: 'absolute',
            }"
          >
            密码：
          </div>
          <input
            :style="{
              border: '1px solid #eee',
              padding: '0 10px',
              boxShadow: '0 0 0px rgba(64, 158, 255, .3)',
              outline: '0px solid #eee',
              color: '#666',
              outlineOffset: '0px',
              borderRadius: '4px',
              background: 'none',
              width: '100%',
              fontSize: 'inherit',
              height: '40px',
            }"
            placeholder="请输入密码"
            name="password"
            type="password"
            v-model="rulesForm.password"
          />
        </div>
        <div
          class="list-item"
          :style="{
            width: '100%',
            margin: '0 0 10px',
            position: 'relative',
            alignItems: 'center',
            flexWrap: 'wrap',
            display: 'flex',
          }"
        >
          <div
            v-if="true"
            class="lable"
            :style="{
              color: '#333',
              left: '-100px',
              textAlign: 'right',
              width: '100px',
              lineHeight: '44px',
              fontSize: 'inherit',
              position: 'absolute',
            }"
          >
            验证码：
          </div>
          <el-image
            :src="`data:image/png;base64, ${imgCode}`"
            @click="getCode"
          ></el-image>
          <input
            :style="{
              border: '1px solid #eee',
              padding: '0 10px',
              boxShadow: '0 0 0px rgba(64, 158, 255, .3)',
              outline: '0px solid #eee',
              color: '#666',
              outlineOffset: '0px',
              borderRadius: '4px',
              background: 'none',
              width: '100%',
              fontSize: 'inherit',
              height: '40px',
            }"
            placeholder="请输入验证码"
            name="captcha"
            v-model="rulesForm.captcha"
          />
        </div>

        <div
          :style="{
            width: '100%',
            margin: '20px auto',
            fontSize: 'inherit',
            textAlign: 'left',
          }"
          v-if="roles.length > 1"
          prop="loginInRole"
          class="list-type"
        >
          <el-radio
            v-for="item in roles"
            v-bind:key="item.roleName"
            v-model="rulesForm.role"
            :label="item.roleName"
            >{{ item.roleName }}</el-radio
          >
        </div>

        <div
          :style="{
            margin: '0',
            alignItems: 'center',
            flexWrap: 'wrap',
            background: 'none',
            display: 'flex',
            width: '600px',
            fontSize: '16px',
            position: 'relative',
            justifyContent: 'flex-start',
          }"
        >
          <el-button
            v-if="loginType == 1"
            :style="{
              border: '0px solid #4FA1D9',
              cursor: 'pointer',
              padding: '0 20px',
              margin: '0 0 16px',
              color: '#fff',
              borderRadius: '4px',
              textAlign: 'center',
              background: '#2b9afc',
              width: 'auto',
              letterSpacing: '4px',
              fontSize: '16px',
              height: '40px',
            }"
            type="primary"
            @click="login()"
            class="loginInBt"
            >登录</el-button
          >
        </div>
       <div class="forgotBox">
        <div
          :style="{
            margin: '0',
            alignItems: 'center',
            flexWrap: 'wrap',
            background: 'none',
            display: 'flex',
            fontSize: '16px',
            position: 'relative',
            justifyContent: 'flex-start',
          }"
        >
          <el-button
            type="text"
            @click="goRegister()"
            >注册账号</el-button
          >
        </div>
        <div
          :style="{
            margin: '0',
            alignItems: 'center',
            flexWrap: 'wrap',
            background: 'none',
            display: 'flex',
            fontSize: '16px',
            position: 'relative',
            justifyContent: 'flex-start',
          }"
        >
          <el-button
            type="text"
            @click="goForgot()"
            >找回密码</el-button
          >
        </div>
       </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import menu from "@/utils/menu";
export default {
  data() {
    return {
      verifyCheck2: false,
      flag: false,
      baseUrl: this.$base.url,
      loginType: 1,
      rulesForm: {
        username: "",
        password: "",
        role: "",
      },
      menus: [],
      roles: [],
      tableName: "",
      imgCode: "",
    };
  },
  mounted() {
    let menus = menu.list();
    this.menus = menus;

    for (let i = 0; i < this.menus.length; i++) {
      if (this.menus[i].hasBackLogin == "是") {
        this.roles.push(this.menus[i]);
      }
    }
  },
  created() {
    this.getCode();
  },
  methods: {
    goRegister() {
      this.$router.push('/register')
    },
	goForgot() {
		this.$router.push('/forgoPw')
	},
    getCode() {
      this.$http({
        url: `merchant/code`,
        method: "GET",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.imgCode = data.imgContent;
        }
      });
    },
    //注册
    register(tableName) {
      this.$storage.set("loginTable", tableName);
      this.$router.push({ path: "/register", query: { pageFlag: "register" } });
    },
    // 登陆
    login() {
      if (!this.rulesForm.username) {
        this.$message.error("请输入用户名");
        return;
      }
      if (!this.rulesForm.password) {
        this.$message.error("请输入密码");
        return;
      }
      if (!this.rulesForm.captcha) {
        this.$message.error("请输入验证码");
        return;
      }
      if (this.roles.length > 1) {
        if (!this.rulesForm.role) {
          this.$message.error("请选择角色");
          return;
        }

        let menus = this.menus;
        for (let i = 0; i < menus.length; i++) {
          if (menus[i].roleName == this.rulesForm.role) {
            this.tableName = menus[i].tableName;
          }
        }
      } else {
        this.tableName = this.roles[0].tableName;
        this.rulesForm.role = this.roles[0].roleName;
      }

      this.loginPost();
    },
    loginPost() {
      this.$http({
        url: `${this.tableName}/login`,
        method: "post",
        params: this.rulesForm
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$storage.set("Token", data.token);
          this.$storage.set("role", this.rulesForm.role);
          this.$storage.set("sessionTable", this.tableName);
          this.$storage.set("adminName", this.rulesForm.username);
          this.$router.replace({ path: "/" });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.forgotBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.container {
  min-height: 100vh;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background: url(http://codegen.caihongy.cn/20231118/03ccfac983fd4dac8fa98ccb357ee0dc.jpg);

  .list-item /deep/ .el-input .el-input__inner {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0 10px;
    box-shadow: 0 0 0px rgba(64, 158, 255, 0.3);
    outline: 0px solid #eee;
    color: #666;
    background: none;
    width: 100%;
    font-size: inherit;
    outline-offset: 0px;
    height: 40px;
  }

  .list-item.select /deep/ .el-select .el-input__inner {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0 10px;
    margin: 0;
    color: #ccc;
    background: none;
    width: 100%;
    font-size: 14px;
    height: 40px;
  }

  .list-code /deep/ .el-input .el-input__inner {
    border: 1px solid #eee;
    border-radius: 4px 0 0 4px;
    padding: 0 10px;
    color: #666;
    background: none;
    width: calc(100% - 80px);
    font-size: inherit;
    height: 40px;
  }

  .list-type /deep/ .el-radio__input .el-radio__inner {
    background: rgba(53, 53, 53, 0);
    border-color: #999;
  }
  .list-type /deep/ .el-radio__input.is-checked .el-radio__inner {
    background: #2b9afc;
    border-color: #2b9afc;
  }
  .list-type /deep/ .el-radio__label {
    color: #999;
    font-size: 14px;
  }
  .list-type /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #2b9afc;
    font-size: 14px;
  }
}
</style>
